<template>
  <div
    :class="[
      $style.optionBox,
      OptionChecked ? $style.optionBoxChecked : '',
      !text ? $style.optionDefaultText : '',
      type === 'radio' ? $style.optionBoxRadio : '',
    ]"
    @click="onChangeChecked"
  >
    {{ text || '*' }}
  </div>
</template>

<script>
export default {
  name: 'Option',
  props: {
    text: {
      type: String,
      default: '',
    },
    checked: {
      type: [Boolean, undefined],
      default: undefined,
    },
    type: {
      type: String,
      default: 'checkbox',
    },
  },
  data() {
    return {
      OptionChecked: this.checked || false,
    };
  },
  watch: {
    checked(value) {
      this.OptionChecked = value;
    },
  },
  methods: {
    onChangeChecked() {
      if (this.checked === undefined) {
        this.OptionChecked = !this.OptionChecked;
        this.$emit('change', this.OptionChecked);
      } else {
        this.$emit('change', !this.checked);
      }
    },
  },
};
</script>

<style lang="less" module>
@import '~vant/lib/style/var.less';
@import '~@scf/ding-style-less/var.less';
@import '../../global.less';

.optionBox {
  color: @subtitle-color;
  width: 30px;
  height: 30px;
  border: 1px solid @border-color;
  text-align: center;
  line-height: 28px;
  display: inline-block;
  font-size: 14px;
  background: #fff;
  border-radius: 2px;
  cursor: pointer;
}

.optionBoxRadio {
  border-radius: 50%;
}

.optionBoxChecked {
  color: #fff;
  background: @primary-color;
  border: 1px solid @primary-color;
}

.optionDefaultText {
  position: relative;
  color: transparent;
  &::before {
    content: '';
    width: 6px;
    height: 12px;
    top: 5px;
    left: 10px;
    transform: rotate(45deg);
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    position: absolute;
  }
}
</style>
